<!--
 * @Description: 入口组件
 * @Author: wangfuwei
 * @Date: 2020-11-30 13:06:57
 * @LastEditors: wangfuwei
 * @LastEditTime: 2021-04-23 21:22:58
 * @FilePath: /horizon-frontend/src/App.vue
-->
<template>
  <a-config-provider :locale="locale">
    <div id="app">
      <router-view />
    </div>
  </a-config-provider>
</template>

<script>
import { appMixin, appDeviceEnquire } from "@/utils/mixin";

export default {
  mixins: [appMixin, appDeviceEnquire],
  mounted() {
    this.handleDragPop();
  },
  computed: {
    locale() {
      document.title = this.$t("title");
      return this.$i18n.getLocaleMessage(this.language).antLocale;
    },
  },
  methods: {
    /**
     * @description: 监听DOM树变化 弹窗添加可移动功能
     */
    handleDragPop() {
      const MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
      if (!this.observer) {
        // 监听document变化
        this.observer = new MutationObserver(check);
        this.observer.observe(document.documentElement, {
          childList: true,
          subtree: true,
        });
      }

      function check() {
        // 检查指定节点是否有匹配
        const elements = document.querySelectorAll(".ant-modal-wrap");
        for (let j = 0; j < elements.length; j++) {
          const element = elements[j];
          const modalHeader = element.querySelector(".ant-modal-header");
          if (modalHeader && !modalHeader.ready) {
            const modalH = element.querySelector(".ant-modal-header");
            modalH.ready = true;
            modalH.style.cursor = "move";
            const reg = /-?[0-9]+/g;
            const transform = element.style.transform ? element.style.transform.match(reg) : [];
            let move = false;
            let movex = transform[0] ? parseInt(transform[0]) : 0;
            let movey = transform[1] ? parseInt(transform[1]) : 0;
            let previousEvent = null;
            modalH.addEventListener(
              "mousedown",
              function(event) {
                previousEvent = event;
                move = true;
              },
              false,
            );
            element.addEventListener(
              "mouseup",
              function() {
                move = false;
              },
              false,
            );
            element.addEventListener(
              "mouseleave",
              function() {
                move = false;
              },
              false,
            );
            element.parentElement.addEventListener(
              "mousemove",
              function(event) {
                if (move && previousEvent) {
                  movex = movex + event.screenX - previousEvent.screenX;
                  movey = movey + event.screenY - previousEvent.screenY;
                  element.style.transform = `translate(${movex}px, ${movey}px)`;
                }
                previousEvent = event;
              },
              false,
            );
          }
        }
      }
    },
  },
};
</script>
